<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page import="com.lp.cfg.ProConfig"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html>
<html>
<head>
<%@ include file="/WEB-INF/oss/iot/common/variable.jsp"%>
<%@ include file="/WEB-INF/oss/iot/common/variable_js.jsp"%>
<%@ include file="/WEB-INF/oss/iot/common/resource_lib.jsp"%>
<style type="text/css">
	.index_theLeft ul {
	    width: 100%;
	    padding: 0px;
	    margin: 0px;
	    overflow: auto;
	}
	.index_theLeft li {
	    list-style: none;
	    text-align: center;
	    position: relative;
	    padding: 15px 0;
	    border-bottom: 1px solid #f9f9f9;
	    cursor: pointer;
	}
	
	.index_theLeft li.active , .index_theLeft li:HOVER{
		background: #f9f9f9;
	}
	
	.index_theLeft li span,.index_theLeft li h5{
		text-align: center;
		color: #333;
	}
	.mapContainer{
		height: 550px;width:100%;
	}
	.dashboard-menu{
		border-top:1px solid #ecf0f5;
	}
	.app-container{
		background:  #f2f2f2;width: 100%;border-top:1px solid #ecf0f5;
	}
	.box-white {
	    width: 97%;
	    min-width: 897px;
	    padding-bottom: 0;
	    margin: 0 auto;
	}
	.box {
	    padding: 10px;
	    padding-top:1px;
	    border-left: 1px solid #d2d6de;
	    border-right: 1px solid #d2d6de;
	    border-bottom: 1px solid #d2d6de;
	}
	.box {
	    border: 0!important;
	    box-shadow: 0 0 2px 1px rgba(13,5,9,.08)!important;
	}
	.box {
	    position: relative;
	    border-radius: 3px;
	    background: #fff;
	    border-top: 3px solid #d2d6de;
	    margin-bottom: 20px;
	    width: 100%;
	    box-shadow: 0 1px 1px rgba(0,0,0,.1);
	}

	.sceneList-info{
		padding-top: 10px;
		padding-left: 10px;
	}
	.grant_auth{
		padding: 20px;
	}
	.scene-style{
		padding-left: 40px;
	    height: 40px;
	    line-height: 40px;
	    background: url() 10px center no-repeat #fafafa;
	    color: #333;
	    margin: 2px 0;
	    border-radius: 3px;
	    cursor: pointer;
	    border: 1px solid #d9d9d9;
	}
	.scene-style.active{
		 background: url() 10px center no-repeat #00c0f1;
		 color: white; 
	}
	.dashboard-menu a {
	    display: inline-block;
	}
	.t-c{
		text-align: center;
	}
	.bind{
		cursor: pointer;
		color:#3499da ;
		text-decoration: underline;
	}
</style>
</head>
<body>
	<div>
		<!--  下方部位  -->
		<div style="background: #ecf0f5;">
			<div class="mapContainer" >
				<div class="app-container">
					<div class="container-layout sceneList-info">
						<div class="box join-device-box">
						
							<div class="search-container jui-search_table" config-option="submit:'#searchbtns','table':'#init-table'">
									<span>Username:</span> 
									<input type-name="name" style="width: 240px;" placeholder="User name fuzzy query"   class="input input-self" />
									<span class="ml-10">Mobile phone number:</span> 
									<input type-name="phone" style="width: 240px;" placeholder="Mobile phone number"   class="input input-self" />
									<input type-name="user_id" class="aid" value="${user.id}"  type="hidden" />
									<button onclick="addUser();" class="button ml-20 bg-iot float-right"><span class="icon-plus"></span> Add a contact</button>
									<button id="searchbtns" class="button ml-20 bg-iot float-right"><span class="icon-search"></span> inquire</button>
							</div>
							
							 <div style="margin-top:10px;">
								<div id="init-table" type-option="table" config-option="'url':'/page/contact/user/info',
											param:{},
											columns:[
												{'name':'Serial number','type':'seq','value':'seq','width':'8%'}, 
												{'name':'Name','value':'name','width':'10%'}, 
												{'name':'Telephone','value':'phone','width':'12%'}, 
												{'name':'Email','value':'email','width':'15%'}, 
												{'name':'Wechat public account','type':'self','value_callback':'img_function','width':'15%'}, 
												{'name':'Added time','type':'time','value':'atime','width':'15%'}, 
												{'name':'Controls','type':'self','value_callback':'value_function','width':'8%'}]" > 
								</div>
							</div> 
						</div>
							<!-- 增加用户 -->
							<div style="display:none;padding:20px;" id="add-contactuser" type-option="form_submit"
								  config-option=" 'url':'/contact/user/info',
												  'submit':'.add-Btn',
												  'success':'sunccessReturn' ">
								<div class="form-line">
									<span class="red">*</span>&nbsp;<span>Name:</span>
									<div class="pb-10 pt-10">
										<input placeholder="Name" validate="empty" type-name="name" class="input input-big" >
									</div>
								</div>
								<div class="form-line">
									<span>Gender:</span>
									<div class="pb-10 pt-10">
										<select type-name="sex" type-option="selecter" 
												config-option="'method':'GET','url':'/dictionary/54','key':'code','value':'name','init_value':'Please select gender','type':'list' " 
													 class="input input-big input-select" ></select>
									</div>
								</div>
								<div class="form-line">
									<span class="red">*</span>&nbsp;<span>Phone:</span>
									<div class="pb-10 pt-10">
										<input placeholder="telephone" validate="empty,phone:Correct phone format" type-name="phone" class="input input-big" >
									</div>	
								</div>
								<div class="form-line">
									<span class="red">*</span>&nbsp;<span>Email：</span>
									<div class="pb-10 pt-10">
										<input type-name="email" placeholder="Email" validate="empty,email:Correct email format" class="input input-big" >
									</div>
								</div>
								<div class="form-line clearfix">
									<button onclick="closeAll();" class="button border-gray ml-10 button-big float-right">Cancel</button>
									<button class="add-Btn button ml-20 bg-iot button-big float-right">Save</button>
								</div>
							</div>
							<!-- 编辑用户 -->
							<div style="display:none;padding:20px;" id="modify-contactuser" type-option="form_submit"
								  config-option=" 'url':'/contact/user/info','method':'put',
												  'submit':'.save-Btn',
												  'success':'sunccessReturn' ">
								<div id="detail_get" config-option=" 'url':'/contact/user/info?id=$#init-id$' ">
								<input type="hidden" type-name="id" id="init-id" >
								<div class="form-line">
									<span class="red">*</span>&nbsp;<span>Name:</span>
									<div class="pb-10 pt-10">
										<input placeholder="Name" validate="empty" type-name="name" class="input input-big" >
									</div>
								</div>
								<div class="form-line">
									<span>Gender:</span>
									<div class="pb-10 pt-10">
										<select type-name="sex" validate="empty"  type-option="selecter" 
												config-option="'method':'GET','url':'/dictionary/54','key':'code','value':'name','init_value':'Please select gender','type':'list' " 
													 class="input input-big input-select" ></select>
										</div>
								</div>
								<div class="form-line">
									<span class="red">*</span>&nbsp;<span>Phone:</span>
									<div class="pb-10 pt-10">
										<input placeholder="Phone" validate="empty,phone:Correct phone format" type-name="phone" class="input input-big" >
									</div>	
								</div>
								<div class="form-line">
									<span class="red">*</span>&nbsp;<span>Email：</span>
									<div class="pb-10 pt-10">
										<input type-name="email" placeholder="Email" validate="empty,email:Correct email format" class="input input-big" >
									</div>
								</div>
								<div class="form-line clearfix">
									<button onclick="closeAll();" class="button border-gray ml-10 button-big float-right">Cancel</button>
									<button class="save-Btn button ml-20 bg-iot button-big float-right">Save</button>
								</div>
								</div>
							</div>
							<div class="hide" id="bindInfo" >
								<p class="t-c">Scan the QR code and bind to the wechat public account</p>
								<div class="t-c" style="min-height: 300px;">
									<img id="imgInfo" >
								</div>
							</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">

function value_function(data,seq){
	return "<span tag='Editor' onclick='t_edit(this,"+data.id+")' class='self-icon icon-edit'></span>"+
		   "<span tag='Delete' onclick='t_delete(this,"+data.id+")' class='self-icon icon-bitbucket'></span>" ;
}

function img_function(data){
	if( validater.empty(data.wx_key)){
		return "<span class='bind' tag='"+ data.id +"' onclick='openImg(this)' >Bind to wechat</span>" ;
	}else{
		return "<img style='width:30px;max-height:50px; border-radius:5%;' src='"+ data.wx_img +"'>" ;
	}
}

function openImg(obj){
	$("#imgInfo").attr("src", imgUrl+"/qrcode/"+ (parseInt( $(obj).attr("tag")/100) + 1)*100  + "/"+  $(obj).attr("tag")+".jpg" );
	openWindow("绑定","#bindInfo","350px");
	// 这边1s一次定期轮训数据，如果发现绑定，则提示成功
	
	var t = setInterval(function() {
		
		commonAjax("GET",localUrl+"/contact/user/info?id="+$(obj).attr("tag"), "",function(data){ 
			if(isOK(data)){
				if(! validater.empty( data.data.wx_key)){
					tip("Binding successful");
					clearInterval(t);
					setTimeout(function(){
						closeAll();
						$("#init-table").tableAdaptor(); 
					},500)
				}
			}
		});
		
	}, 1000);

}

function t_delete(obj,i){
	lcomfirm('Are you sure to delete the user?',function(){
		commonAjax("DELETE",localUrl+"/contact/user/info?id="+i, "",function(){
			tip("Successfully deleted");
			setTimeout(function(){
				closeAll();
				$("#init-table").tableAdaptor();
			},1000)
		});
	})
}

function t_edit(obj,id){
	writeVal("init-id",id);
	openWindow("Edit User Information","#modify-contactuser","600px");
	manual_init_detail_get($("#detail_get"));
}

// 增加用户
function addUser(){
	$("#addUser input,#addUser select").val("");
	openWindow("Add a user","#add-contactuser","550px");
}
function sunccessReturn(data){
	if(data.status == status_code.OK){
		tip("Save successfully");
		setTimeout(function(){
			closeAll();
			$("#init-table").tableAdaptor();
		},1000)
	}else{
		tip(data.statusMsg);
	}
}
</script>
</html>